<template>
  <el-dialog
    v-model="visible"
    :title="'文档分段预览'"
    width="80%"
    class="chunk-preview-dialog"
  >
    <div class="preview-controls">
      <el-form :inline="true">
        <el-form-item label="分段大小">
          <el-input-number
            v-model="chunkSize"
            :min="100"
            :max="5000"
            :step="100"
            @change="handlePreview"
          />
        </el-form-item>
        <el-form-item label="重叠长度">
          <el-input-number
            v-model="overlap"
            :min="0"
            :max="500"
            :step="50"
            @change="handlePreview"
          />
        </el-form-item>
      </el-form>
    </div>

    <div class="preview-stats" v-if="previewData">
      <el-descriptions :column="4" border>
        <el-descriptions-item label="总字数">
          {{ previewData.totalLength }}
        </el-descriptions-item>
        <el-descriptions-item label="预览字数">
          {{ previewData.previewLength }}
        </el-descriptions-item>
        <el-descriptions-item label="预览分段数">
          {{ previewData.chunks.length }}
        </el-descriptions-item>
        <el-descriptions-item label="预计总分段数">
          {{ previewData.stats.estimatedTotalChunks }}
        </el-descriptions-item>
      </el-descriptions>
      
      <div v-if="previewData.hasMore" class="preview-notice">
        <el-alert
          type="info"
          :closable="false"
          show-icon
        >
          由于文档较大，仅显示开头部分的分段预览。完整分段将在向量化时处理。
        </el-alert>
      </div>
    </div>

    <div class="chunks-container" v-loading="loading">
      <div 
        v-for="chunk in previewData?.chunks" 
        :key="chunk.index"
        class="chunk-item"
      >
        <div class="chunk-header">
          <span class="chunk-index">段落 #{{ chunk.index + 1 }}</span>
          <span class="chunk-length">{{ chunk.length }} 字符</span>
        </div>
        <pre class="chunk-content">{{ chunk.content }}</pre>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认并开始向量化
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { previewDocumentChunks } from '@/api/documents'
import { ElMessage } from 'element-plus'
import { useModelStore } from '@/store/model'

const modelStore = useModelStore()

const props = defineProps({
  modelValue: Boolean,
  document: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['update:modelValue', 'confirm'])

const visible = ref(props.modelValue)
const loading = ref(false)
const previewData = ref(null)

// 从系统配置中获取默认值
const chunkSize = ref(modelStore.config.embedding.parameters.chunkSize)
const overlap = ref(modelStore.config.embedding.parameters.overlap)

watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val) {
    // 打开对话框时清空之前的内容并执行预览
    previewData.value = null
    handlePreview()
  }
})

watch(visible, (val) => {
  emit('update:modelValue', val)
  if (!val) {
    // 关闭对话框时清空内容
    previewData.value = null
  }
})

async function handlePreview() {
  if (!props.document) return
  
  loading.value = true
  try {
    const { data } = await previewDocumentChunks(props.document.id, {
      chunkSize: chunkSize.value,
      overlap: overlap.value
    })
    previewData.value = data
  } catch (error) {
    ElMessage.error('预览失败：' + error.message)
  } finally {
    loading.value = false
  }
}

function handleConfirm() {
  emit('confirm', {
    chunkSize: chunkSize.value,
    overlap: overlap.value
  })
  visible.value = false
}
</script>

<style lang="scss" scoped>
.chunk-preview-dialog {
  .preview-controls {
    margin-bottom: 20px;
  }
  
  .preview-stats {
    margin-bottom: 20px;
  }
  
  .chunks-container {
    max-height: 60vh;
    overflow-y: auto;
    
    .chunk-item {
      margin-bottom: 16px;
      padding: 12px;
      border: 1px solid var(--el-border-color-light);
      border-radius: 4px;
      
      .chunk-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        color: var(--el-text-color-secondary);
        font-size: 14px;
      }
      
      .chunk-content {
        margin: 0;
        white-space: pre-wrap;
        font-size: 14px;
        line-height: 1.6;
        background-color: var(--el-fill-color-light);
        padding: 12px;
        border-radius: 4px;
      }
    }
  }

  .preview-notice {
    margin: 16px 0;
  }
}
</style> 